<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" >
<link th:href="@{/layui/css/layui.css}" rel="stylesheet"/>
<head th:include="admin/common/resource ::commonHead('添加角色')" ></head>
<style>
    .layui-form-item .layui-input-inline{
        margin-left: 30px;
    }
    .layui-form-item .layui-form-label{
        padding: 2px 0px;
    }
    #description{
        width: 90%;
        height: 80px;
        resize: none;
        max-height: 80px;
        min-height: 80px;
    }
</style>
<script>
    function loadPage(url) {
        window.location.href = url;
    }
</script>
<head>
    <title>添加</title>
</head>

<body>

<div class="container" style="margin-left: 0px">
    <div class="toolbar btn-group-sm" role="toolbar" >
        <h6 style="margin-top: 10px;margin-bottom: 20px" > 后台管理系统 / 角色管理 / 添加角色 </h6>
        <div class="btn-group btn-group-toggle" data-toggle="buttons" style="margin-bottom: 16px">
            <label shiro:hasPermission="role:list" class="btn btn-secondary btn-sm" onclick="loadPage('/admin/role/list')">
                <input type="radio" name="options" id="option1" autocomplete="off" checked> 角色列表
            </label>

            <label class="btn btn-secondary btn-sm active">
                <input type="radio" name="options" id="option3" autocomplete="off"> 添加角色
            </label>
        </div>
    </div>

    <form class="layui-form" action="/admin/role/save" method="post" enctype="multipart/form-data">
        <input type="hidden" name="id" value="0">
        <div class="layui-form-item">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <input type="text" name="roleName" required  lay-verify="required" placeholder="请输入角色名称"  class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input checked id="state" type="checkbox" name="state" lay-skin="switch">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <textarea name="description" id="description"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

</body>
<script th:src="@{/layui/layui.all.js}"></script>
<script>

    //Demo
    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){

            var state = $("#state").is(":checked");
            var status = 1;
            if(!state){
                status = 0;
            }
            $.ajax({
                url: "/admin/role/save",
                type:'post',
                contentType:'application/json;charset=UTF-8',
                data:JSON.stringify( {
                    id:0,
                    roleName:data.field.roleName,
                    description:data.field.description,
                    status:status
                }),
                success: function (res) {
                    if(res.code == 1){
                        layer.msg("保存成功!",function () {
                            window.location.href="/admin/role/list";
                        },2000)
                    }
                },
                error:function (err) {
                    layer.msg("保存失败")
                }
            })
            return false;
        });
    });
</script>
</html>